<script setup lang="ts">
import WordPage from '@/views/Word/WordPage.vue'
import EchartDemo from '@/components/Echart/demo.vue'
import router from '@/router/index'
import { localGet, localClear } from '@/Utils/storage'
import EchartLeft1 from '@/components/Echart/left1.vue'
import EchartLeft2 from '@/components/Echart/left2.vue'
import EchartLeft3 from '@/components/Echart/left3.vue'

import footerson from '@/components/Echart/footerson.vue'

import EchartLeft2Right from '@/components/Echart/left2Right.vue'
const userData = localGet('userData') || {} // 用户信息

const onLogout = () => {
  localClear()
  router.push('/login')
}
</script>

<template>
  <div>
    <div class="header">
      <div class="user-div">
        <span class="logout" @click="onLogout">退出</span>
        <span class="account">{{ userData.account || '' }}</span>
      </div>
      <h1>TIENS 数据驾驶舱</h1>
    </div>
    <div class="main">
      <div class="top">top box</div>
      <div class="left-box">
        <!-- 左侧图表集合 -->
        <div class="panel">
          <!-- <EchartDemo chart-name="name1" /> -->
          <EchartLeft1 chart-name="pie1"></EchartLeft1>
        </div>
        <div class="panel">
          <div class="panelSon">
            <EchartLeft2 chart-name="pie2"></EchartLeft2>
          </div>
          <div class="panelSon">
            <EchartLeft2Right chart-name="pie2Right"/>
          </div>
        </div>
        <div class="panel">
          <EchartLeft3 chart-name="pie3"></EchartLeft3>
        </div>
      </div>
      <div class="main-box">
        <!-- 地球 -->
        <WordPage />
      </div>
      <div class="right-box">
        <!-- 右侧图表集合 -->
        <!-- <EchartDemo chart-name="name2" /> -->
        <div class="panel">
          <!-- <EchartDemo chart-name="name1" /> -->



        </div>
        <div class="panel">

        </div>
        <div class="panel">


        </div>
        <div class="panel"></div>
        <div class="panel"></div>
      </div>

      <div class="footer">
        <div><footerson chart-name="footerson"></footerson></div>
        <div><footerson chart-name="footerson1"></footerson></div>
        <div><footerson chart-name="footerson2"></footerson></div>
        <div><footerson chart-name="footerson3"></footerson></div>
        <div><footerson chart-name="footerson4"></footerson></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header {
  background: #010926 url('../images/img/title.png') no-repeat center center;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  text-align: center;
  color: #fff;
  z-index: 10;

  /* display: flex; */
  h1 {
    height: 60px;
    line-height: 60px;
    font-weight: 600;
    background: linear-gradient(0deg, #5197ff, #80f2ff);
    -webkit-background-clip: text;
    color: transparent;
    font-size: 2.6rem;
  }

  img {
    width: 100%;
    height: 60px;
  }

  // 用户信息和退出
  .user-div {
    position: absolute;
    top: 30px;
    left: 59px;
    color: #fff;
    font-size: 16px;
    .logout {
      cursor: pointer;
    }
    .account {
      margin-left: 10px;
    }
  }
}

.main {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  height: calc(100vh - 60px);
  background-color: #010926;
}

.main-box {
  position: fixed;
  top: 60px;

  width: 100vw;
  height: calc(100vh - 60px);
  z-index: 9;
}

.left-box,
.right-box {
  display: flex;
  justify-content: center;
  // align-items: center;
  position: fixed;
  top: 60px;
  width: 350px;
  height: calc(100vh - 60px);
  z-index: 10;
  flex-wrap: wrap;
}

.left-box {
  left: 0;
  background-color: #cccccc2a;
  >:nth-child(2){
    display: flex;
  }
  .panel {
    width: 100%;
    height: 200px;
    margin: 4px 0;
    
    .panelSon{
      flex: 1;
      height: 100%;
      background: #07143d;
    }
  }
}

.right-box {
  right: 0;
  background-color: #ffffff32;
  .panel {
    width: 100%;
    height: 210px;
    margin: 4px 0;
  }
}

.top {
  position: fixed;
  top: 60px;
  left: calc(50% - 350px);
  width: 700px;
  height: 164px;
  background: linear-gradient(-14deg, #0f528b, #2040a9);
  opacity: 0.5;
  border-radius: 10px;
  z-index: 10;
}

.footer {
  position: fixed;
  bottom: 0;
  left: calc(50% - 400px);
  z-index: 10;
  width: 800px;
  display: flex;
  height: 164px;
  // height: 400px;
  background: linear-gradient(-14deg, #0f528b, #2040a9);
  // opacity: 0.5;
  border-radius: 10px;
  > div {
    // width: 200px;
    flex: 1;
    // width: 200px;
  }
}
</style>
